<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">{{ t('welcome') }}</h1>
    <p class="mb-4">{{ t('description') }}</p>
    <div class="flex space-x-2 mb-4">
      <button
        @click="switchToEnglish"
        class="px-4 py-2 bg-primary text-white rounded"
      >
        English
      </button>
      <button
        @click="switchToChinese"
        class="px-4 py-2 bg-primary text-white rounded"
      >
        中文
      </button>
    </div>
    <p>Current language: {{ currentLang }}</p>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

const { t, locale } = useI18n({
  useScope: 'global'
})
const currentLang = computed(() => locale.value)

const switchToEnglish = () => {
  console.log('Switching to English')
  locale.value = 'en'
}

const switchToChinese = () => {
  console.log('Switching to Chinese')
  locale.value = 'zh'
}
</script>
